<template>
    <div>
      <el-calendar>
        <template #dateCell="{ data }">
          <div :class="['calendar-date', { 'has-event': hasEvent(data.day) }]">
            <!-- 显示日期和内容 -->
            <p>
              {{ data.day.split('-').slice(1).join('-') }}
            </p>
            <!-- 显示事件 -->
            <div v-if="events[data.day]">
              <p v-for="event in events[data.day]" :key="event.id">
                🧡{{ event.name }} ({{ event.unit }})
              </p>
            </div>
          </div>
        </template>
      </el-calendar>
    </div>
  </template>

<script>
export default {
    created() {
        this.fetchEvents(); // 组件创建时请求数据
    },
    data() {
        return {
            // 定义特殊日期和事件
            events: {
            }
        };
    },
    methods: {
        // 获取事件数据
        fetchEvents() {
            this.$ajax.get('/test-item/list')
                .then(response => {
                    this.formatEvents(response);
                })
                .catch(error => {
                    console.error("请求失败:", error);
                });
        },
        // 格式化接口数据为日历可用的格式
        formatEvents(eventData) {
            console.log(eventData)
            eventData.forEach(item => {
                if (!this.events[item.day]) {
                    this.events[item.day] = [];
                }
                this.events[item.day].push(item);
            });
            console.log(this.events)
        },
        // 使用 in 操作符检查日期是否为特殊日期
        // 检查当前日期是否有事件
        hasEvent(date) {
            return date in this.events;
        }
    }
}
</script>

<style>
.calendar-date {
    padding: 5px;
    text-align: center;
}

.is-selected {
    color: #1989FA;
}

.calendar-date p {
    margin: 0;
}

.calendar-date span {
    color: red;
    /* 特殊日期标记颜色 */
}
</style>